<template>
	<view class="password-manage-container">
		<view class="content">
			<uni-forms :model="formData" ref="form" label-width="80px">
				<uni-forms-item label="昵称" name="nickname" required>
					<uni-easyinput type="text" v-model="formData.nickname" placeholder="请输入昵称" />
				</uni-forms-item>
				<uni-forms-item label="账号" name="loginId" required>
					<uni-easyinput type="text" v-model="formData.loginId" placeholder="请输入账号" />
				</uni-forms-item>
				<uni-forms-item label="旧密码" name="oldPwd" required>
					<uni-easyinput type="password" v-model="formData.oldPwd" placeholder="请输入账号" />
				</uni-forms-item>
				<uni-forms-item label="新密码" name="newLoginPwd" required>
					<uni-easyinput type="password" v-model="formData.newLoginPwd" placeholder="请输入账号" />
				</uni-forms-item>
				<uni-forms-item label="确认密码" name="comfirmPassword" required>
					<uni-easyinput type="password" v-model="formData.comfirmPassword" placeholder="请输入账号" />
				</uni-forms-item>
			</uni-forms>
			<button class="btn" @click="submitForm">确定</button>
		</view>
	</view>
</template>

<script>
	import {updateUserInfo} from "../../ajax/api/self.js";
	import {mapState,mapMutations} from "vuex";
	export default {
		data() {
			return {
				formData: {
					nickname: "", //昵称
					loginId: "", //账号
					oldPwd: "", //旧密码
					newLoginPwd: "", //新密码
					comfirmPassword: "", //确认新密码
				},
				rules: {
					nickname: {
						rules: [{
							required: true,
							errorMessage: '请填写用户昵称',
						}]
					},
					loginId: {
						rules: [{
							required: true,
							errorMessage: '请填写账号名',
						}]
					},
					oldPwd: {
						rules: [{
							required: true,
							errorMessage: '请填写旧密码',
						}]
					},
					newLoginPwd: {
						rules: [{
							required: true,
							errorMessage: '请填写新密码',
						}, {
							// 对密码长度进行限制
							minLength: 6,
							maxLength: 18,
							errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符',
						}]
					},
					comfirmPassword: {
						rules: [{
							required: true,
							errorMessage: '请确认新密码',
						}, {
							validateFunction: (rule, value, data, callback) => {
								if (value !== this.formData.newLoginPwd) {
									callback("输入的密码不一致")
								} else {
									callback();
								}
							}
						}]
					}
				}
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		onLoad() {
			this.formData.nickname = this.userInfo.nickname;
			this.formData.loginId = this.userInfo.loginId;
		},
		computed:mapState(["userInfo"]),
		methods: {
			...mapMutations(["updateUserInfo","setToken"]),
			async submitForm() {
				this.$refs.form.validate().then(async res => {
					const result = await updateUserInfo(this.userInfo._id,{
						...this.formData,
					});
					uni.showToast({
						title:"修改成功"
					})
					// 清空userInfo和token
					this.$store.commit("updateUserInfo",null);
					this.$store.commit("setToken",null);
					setTimeout(()=>{
						uni.navigateTo({
							url:"/pages/login/login"
						})
					},500)
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.password-manage-container {
		.content {
			height: 600rpx;
			margin: 40rpx;

			.btn {
				background: #4f98dc;
				color: #fff;
				margin-top: 80rpx;
			}
		}
	}
</style>
